<template>
  <!-- 一磅弹窗 -->
  <el-dialog
   
    :title="title"
    v-model="dialogVisible"
    :modal="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :show-close="false"
    width="50%"
    top="60px"
    class="dialog-container"
  >
    <div>
      <div class="infobox">
        <div class="infobox_item">
          <div class="infobox_item_name">车牌号:</div>
          <div class="infobox_item_value">{{
            poundInfo.licensePlateNumber
          }}</div>
        </div>
        <div v-if="poundInfo.weightingPlans && poundInfo.weightingPlans.length > 0" class="infobox_item" style="display: flex; align-items: center;">
          <div class="infobox_item_name">物料名称:</div>
          <div class="infobox_item_value">
            <el-select v-model="materialId" style="width:100%" placeholder="请选择物料">
              <el-option
                v-for="item in poundInfo.weightingPlans"
                :key="item.cinvcode"
                :label="item.cinvname"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
      </div>
      <div v-if="wareHouseList.length > 0" class="radiobox">
        <el-radio-group v-model="wareHouseId">
          <el-radio
            v-for="item in wareHouseList"
            :key="item.id"
            :label="item.id"
            class="radiobox_item"
          >{{ item.wareHouse }}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'



// 定义接口
interface WeightingPlan {
  cinvcode: string
  cinvname: string
  id: string | number
}

interface Warehouse {
  id: string | number
  wareHouse: string
}

interface PoundInfo {
  licensePlateNumber: string
  weightingPlans?: WeightingPlan[]
  weightingType?: string
  remoteIp?: string
  orderId?: string
  licensePlateRecognition?: string
}

// 定义 Props
const props = defineProps({
  poundRoom: {
    type: Number,
    required: true,
    default: 0
  },
  dialogShow: {
    type: Boolean,
    default: false
  },
  wareHouseList: {
    type: Array as PropType<Warehouse[]>,
    default: () => []
  },
  poundInfo: {
    type: Object as PropType<PoundInfo>,
    default: () => ({})
  },
  width: {
    type: [String, Number],
    default: '60%'
  },
  title: {
    type: String,
    default: '请选择仓库'
  }
})

// 定义 Emits
const emit = defineEmits(['close', 'confirm'])

// 响应式变量
const wareHouseId = ref<string | number>('')
const materialId = ref<string | number>('')

// 计算属性
const dialogVisible = computed({
  get: () => props.dialogShow,
  set: (val) => {
    if (!val) handleClose()
  }
})

// 监听 poundInfo 变化
watch(() => props.poundInfo, (newVal) => {
  if (newVal?.weightingPlans?.length) {
    materialId.value = newVal.weightingPlans[0].id
  }
}, { immediate: true, deep: true })

// 方法
const handleConfirm = async () => {
  const { poundInfo, wareHouseList, wareHouseId: whId, materialId: mId, poundRoom } = props
  const { licensePlateNumber, weightingType, remoteIp, orderId, licensePlateRecognition, weightingPlans } = poundInfo

  let params: any = {
    licensePlateNumber,
    weightingType,
    clientAddress: remoteIp,
    orderId,
    licensePlateRecognition
  }

  // 验证仓库选择
  if (wareHouseList.length > 0 && !whId.value) {
    ElMessage.error('请选择仓库再确定!')
    return
  }

  // 验证物料选择
  if (weightingPlans?.length && !mId.value) {
    ElMessage.error('请选择物料再确定!')
    return
  }

  // 添加仓库信息
  if (whId.value) {
    const wareHouseInfo = wareHouseList.find(item => item.id === whId.value)
    if (!wareHouseInfo) {
      ElMessage.error('未找到对应物料，请重新选择!')
      return
    }
    params.warehouse = wareHouseInfo.wareHouse
  }

  // 添加物料信息
  if (mId.value) {
    params.weighingPlanId = mId.value
  }

  // 处理不同磅房逻辑
  if (!params.orderId) {
    handleClose()
    return
  }

  if (poundRoom === 2) {
    try {
      const res = await sengMessageToDriver(params)
      if (res.code === 200) {
        ElMessage.success(res.message)
        handleClose()
      }
    } catch (err) {
      console.error('API error:', err)
    }
  } else if (poundRoom === 1) {
    emit('confirm', params)
    // 重置选择
    wareHouseId.value = ''
    materialId.value = ''
  }
}

const handleClose = () => {
  wareHouseId.value = ''
  materialId.value = ''
  emit('close')
}
</script>

<style>
.dialog-container .el-dialog__body {
  padding: 0 20px !important;
}
</style>

<style lang="scss" scoped>
.dialog-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  background-color: red;
  
  .infobox {
    padding: 10px 0;
    box-sizing: border-box;
    
    &_item {
      display: flex;
      margin-bottom: 10px;
      
      &_name {
        font-size: 18px;
        font-weight: bold;
        width: 80px;
        text-align: right;
      }
      
      &_value {
        margin-left: 5px;
        font-size: 18px;
        flex: 1;
        line-height: 24px;
      }
    }
  }
  
  .radiobox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    
    &_item {
      min-width: 100px;
      margin: 2px 0;
      padding: 5px;
      box-sizing: border-box;
    }
  }
}
</style>